<template>
	<view class="content">
		<view class="content-1">
			<!-- <image src="../../static/image/titlepic02.png" mode="widthFix"></image> -->
			<view class="content-1-1">
				服务流程
			</view>
		</view>
		<view class="content-2 flex">
			<view class="flex-col grid-item item" v-for="(item,index) in infos[type]" :key="index">
			  <view class="flex-col space-y-20" :class="{'section_14':type == 'deal','section_13':type != 'deal'}">
			    <text class="font_7 text_24">{{item.name}}</text>
			    <text v-if="item.des" class="font_8 text_19">{{item.des}}</text>
			  </view>
			  <view class="flex-col items-center text-wrapper_6"><text class="font_6">{{num[index]}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:['type'],
	data() {
		return {
			infos: {
				deal:[
					{name:'提出需求',des:'联系顾问，提供一对一服务'},
					{name:'完成选购',des:'快速匹配专利，确认专利可转让'},
					{name:'签订合同',des:'信息保密，签订合同，支付定金'},
					{name:'上报材料',des:'联系顾问，提供一对一服务'},
					{name:'交付合格通知书',des:'我司收到手续合格通知书后寄给买家'},
					{name:'支付尾款',des:'买家核实手续合格通知书，支付剩余尾款'},
					{name:'交付证书',des:'确认收款后，我司将专利证书寄给买家'}
				],
				answer:[
					{name:'客户提供资料'},
					{name:'代理人分析驳回理由'},
					{name:'与申请人沟通并提出答审方案'},
					{name:'手机复审过程中所需证据材料'},
					{name:'完成答审材料并提交'},
					{name:'实时监控后续审查事宜'},
					{name:'结果告知客户'}
				],
				apply:[
					{name:'客户提出申请'},
					{name:'专利顾问对接'},
					{name:'下专利订单签合同'},
					{name:'专利查新撰写'},
					{name:'确认专利文件'},
					{name:'专利递交受理'},
					{name:'审查答复意见'},
					{name:'获取专利证书'},
					{name:'专利年费监控'}
				]
			},
			num:['一','二','三','四','五','六','七','八','九','十']
		};
	}
}
</script>

<style lang="scss" scoped>
.content {
	background: #fff;
	padding: 32rpx 35rpx 90rpx 20rpx;
	margin-top: 20rpx;
	.content-1 {
		position: relative;
		height: 32rpx;
		image {
			position: absolute;
			top: 18rpx;
			height:18rpx;
			width: 158rpx;
		}
	}
	.content-1-1 {
		position: absolute;
		font-size: 32rpx;
		color: $uni-color-middle;
		background-image: linear-gradient(90deg,
		#f6e57f 0%, 
		#fd8261 100%);
	}
	.content-2 {
		margin-top: 38rpx;
		flex-wrap: wrap;
		.item {
			font-size: 30rpx;
			color: #293f67;
			margin-bottom: 40rpx;
			// margin-right: 14rpx;
		}
	}
}

.grid-item {
  padding: 42rpx 0 14rpx;
  position: relative;
}
.font_7 {
  font-size: 28rpx;
  font-family: Microsoft YaHei;
  line-height: 28rpx;
  color: #293f67;
}
.font_8 {
  font-size: 24rpx;
  font-family: Microsoft YaHei;
  line-height: 32rpx;
  font-weight: 300;
  color: #454c59;
}
.text_19 {
  align-self: flex-start;
  width: 204rpx;
}
.font_6 {
  font-size: 30rpx;
  font-family: Microsoft YaHei;
  line-height: 28rpx;
  color: #333333;
}
.text-wrapper_6 {
  padding: 11rpx 0;
  background-color: #ffffff;
  border-radius: 25rpx;
  width: 150rpx;
  position: absolute;
  top: 17rpx;
  left: 50%;
  transform: translateX(-50%);
}
.section_13 {
	width: 222rpx;
	height: 140rpx;
  margin-left: 11rpx;
  // margin-right: 3rpx;
  padding: 40rpx 0 24rpx 11rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  border: solid 6rpx #d9e6fe;
}

.section_14 {
	width: 222rpx;
	height: 200rpx;
  margin-left: 11rpx;
  // margin-right: 3rpx;
  padding: 40rpx 0 24rpx 11rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  border: solid 6rpx #d9e6fe;
}

.text_24 {
  align-self: center;
}
.space-y-20 > view:not(:first-child),
.space-y-20 > text:not(:first-child),
.space-y-20 > image:not(:first-child) {
  margin-top: 20rpx;
}
</style>